<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <dir id="root">
        <h1>插值语法</h1>
        <h3>welcome to {{city}}</h3>
        <h1>指令语法</h1>
        <!-- v-bind 把参数当场表达式执行 -->
        <a v-bind:href="url" v-bind:x="age">百度</a>
        <!-- 参数是自定义的，名字随便起 -->
        <!-- v-bind 简写方式  直接使用:代替 -->
        <a :href="url1" :x="age">百度</a>
    </dir>

</body>

<script>
    new Vue({
        el: "#root",
        data: {
            city: "北京",
            age: 18,
            url: "https://www.baidu.com",
            url1: "https://www.baidu.com"
        },
    })
</script>


</html>